<template>
  <h1>El-开关组件</h1>
  <el-switch v-model="value1"/>
  <el-switch
      v-model="value2"
      class="ml-2"
      style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
  />
  <hr>
  <span v-if="isAdmin">{{show}}</span>
  <el-switch v-model="isAdmin"></el-switch>
  是否显示图片
  <el-switch v-model="isShow"></el-switch>
  <hr>
  <img src="fcq.jpg" width="200" alt="范传奇" v-if="isShow">
  <hr>
  <el-switch inactive-value="0" active-value="1" v-model="num"></el-switch>
  <el-switch inactive-value="'0'" active-value="'1'" v-model="numStr"></el-switch>
</template>

<script setup>
import {ref} from 'vue'

const value1 = ref(true);
const value2 = ref(true);
const isAdmin = ref(true);
const isShow = ref(true);
const show = ref('管理员');
const num = ref(1);
const numStr = ref('0');
</script>


<style scoped>

</style>